<template>
  <div class="container">
    <el-dialog
      title="盘点计划单明细详情"
      :visible.sync="particularsDialog.centerDialogVisible"
      fullscreen
      @open="getData"
      @close="confirm"
      center
    >
      <el-button
        size="small"
        type="danger"
        icon="el-icon-delete"
        @click="handleDeleteList()"
        >删除</el-button
      >
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        empty-text="暂无数据"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goods_name"
          label="商品名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="erp_goods_bar_code"
          label="商品条形码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="erp_goods_code"
          label="商品code"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="take_stock_id"
          label="盘点计划单id"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="typeMsg"
          label="类型"
          align="center"
        ></el-table-column>
        <!-- <el-table-column
          prop="inp_out_price"
          label="出入库价格"
          align="center"
        ></el-table-column> -->
        <el-table-column
          prop="inp_out_num"
          label="出入库数量"
          align="center"
        ></el-table-column>
        <!-- <el-table-column prop="inp_out_amount" label="差异金额" align="center"></el-table-column> -->

        <el-table-column
          prop="inp_out_qty"
          label="出入库件数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="before_qty"
          label="盘点前系统件数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="before_num"
          label="盘点前系统数量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="real_qty"
          label="实际盘点件数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="real_num"
          label="实际盘点数量"
          align="center"
        ></el-table-column>
         <el-table-column
        prop="warehouse_code"
        label="仓库编码"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="warehouse_name"
        label="仓库名称"
        align="center"
      ></el-table-column>
        <el-table-column
          prop="unit"
          label="单位"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="spec"
          label="规格"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="rk_spec"
          label="入库规格"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="class_name"
          label="分类名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="statusMsg"
          label="状态"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="created_at"
          label="创建时间"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="200px" align="center">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="deletion(scope)"
              >删除</el-button
            >
            <el-button
              size="mini"
              icon="el-icon-edit"
              type="primary"
              @click="handleEdit(scope)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        width="400px"
        title="编辑"
        center
        :visible.sync="dialog.innerVisible"
        append-to-body
      >
        <el-form
          ref="formData"
          :rules="rules"
          :model="form"
          label-width="130px"
          label-position="left"
        >
          <el-form-item label="盘点人姓名：" prop="username">
            <el-input v-model="form.username" placeholder="请输入盘点人姓名" />
          </el-form-item>

          <!-- <el-form-item label="商品code" prop="good_code">
            <el-input
              v-model="form.good_data[0].good_code"
              placeholder="请输入商品code"
            />
          </el-form-item> -->

          <el-form-item label="真实盘点数量：">
            <el-input
              @input="qtyNum"
              v-model="form.good_data[0].real_num"
              placeholder="请输入真实盘点数量"
            />
          </el-form-item>
          <el-form-item label="入库规格：">
            <el-input
              :disabled="true"
              v-model="form.good_data[0].rk_spec"
              placeholder="请输入入库规格"
            />
          </el-form-item>
          <el-form-item label="真实盘点件数：">
            <el-input
              :disabled="true"
              v-model="form.good_data[0].real_qty"
              placeholder="请输入真实盘点件数"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirmOne">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 分页 -->
      <pagination
        @page="handleSizeChange"
        @pagesize="handleCurrentChange"
        :pageData="pageData"
      ></pagination>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getTakeStockPlanDetail,
  deleteTakeStockGoodsPlan,
  addRealStockNum,
} from "@/api/check/superCheck";
import Pagination from "@/components/pagination";

export default {
  props: {
    particularsDialog: Object,
  },
  components: {
    pagination: Pagination,
  },
  data() {
    return {
      tableData: [],
      pageData: {
        pageSizes: [10, 20],
        pageSize: 10,
        page: 1,
        total: null,
        layout: "total, sizes, prev, pager, next, jumper",
      },
      dialog: {
        innerVisible: false,
      },
      multipleSelection: [],
      form: {
        code: "",
        username: "",
        good_data: [
          {
            good_code: "",
            real_num: "",
            real_qty: "",
            rk_spec: "",
          },
        ],
      },
      take_stock_plan_info: {},
      rules: {
        username: [
          { required: true, message: "请输入盘点人姓名", trigger: "blur" },
        ],
        // good_code: [
        //   { required: true, message: "请输入商品code", trigger: "blur" },
        // ],

        // real_num: [
        //   { required: true, message: "请输入真实盘点数量", trigger: "blur" },
        // ],
        // real_qty: [
        //   { required: true, message: "请输入真实盘点件数", trigger: "blur" },
        // ],
        // rk_spec: [
        //   { required: true, message: "请输入入库规格", trigger: "blur" },
        // ],
      },
    };
  },
  created() {},
  methods: {
    //关闭
    confirm() {
      this.cancel();
      this.particularsDialog.centerDialogVisible = false;
    },
    cancel() {
      this.dialog.innerVisible = false;
    },
    //确定内层
    confirmOne() {
      let data = {
        code: this.form.code,
        username: this.form.username,
        good_data: JSON.stringify(this.form.good_data),
      };
      addRealStockNum(data).then((res) => {
        if (res.code == 0) {
          this.$message({
            type: "success",
            message: res.msg || res.message,
          });
          this.getData();
          this.cancel();
        } else {
          this.$message({
            type: "info",
            message: res.msg || res.message,
          });
        }
      });
    },

    //删除
    deletion(scope) {
      this.$confirm("是否删除该条商品?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            ids: scope.row.id,
          };
          deleteTakeStockGoodsPlan(data).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: res.msg || res.message,
              });
              this.getData();
            } else {
              this.$message({
                type: "info",
                message: res.msg || res.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //删除列表勾选
    handleDeleteList(scope) {
      this.$confirm("是否删除该商品?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.multipleSelection.length == 0) {
            this.$message({
              type: "info",
              message: "请选择商品",
            });
            return false;
          } else {
            let data = {
              ids: this.multipleSelection.join(","),
            };
            deleteTakeStockGoodsPlan(data).then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: res.msg || res.message,
                });
                this.getData();
              } else {
                this.$message({
                  type: "info",
                  message: res.msg || res.message,
                });
              }
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
   
    //计算规格
    qtyNum() {
      this.form.good_data[0].real_qty = (
        this.form.good_data[0].real_num / this.form.good_data[0].rk_spec
      ).toFixed(4);
    },
    // 获取数据
    getData() {
      this.tableData = [];
      this.center = [];
      let data = {
        limit: this.pageData.pageSize,
        page: this.pageData.page,
        code: this.particularsDialog.code,
      };
      getTakeStockPlanDetail(data).then((res) => {
        if (res.code == 0) {
          res.data.take_stock_goods_plan_list.data.forEach((item) => {
            item.statusMsg = item.status == 1 ? "待审核" : "已审核";
            switch (item.type) {
              case 0:
                item.typeMsg = "待确认";
                break;
              case 1:
                item.typeMsg = "盘点入库";
                break;
              case 2:
                item.typeMsg = "盘点出库";
                break;
            }
          });
          this.tableData = res.data.take_stock_goods_plan_list.data;
          this.take_stock_plan_info = res.data.take_stock_plan_info;
          this.pageData.page = res.data.take_stock_goods_plan_list.current_page;
          this.pageData.pagesize = res.data.take_stock_goods_plan_list.per_page;
          this.pageData.total = res.data.take_stock_goods_plan_list.total;
        }
      });
    },
    //编辑
    handleEdit(scope) {
      this.dialog.innerVisible = true;
      this.form = {
        code: this.take_stock_plan_info.code,
        username: scope.row.username,
        good_data: [
          {
            good_code: scope.row.erp_goods_code,
            real_num: scope.row.real_num,
            real_qty: scope.row.real_qty,
            rk_spec: scope.row.rk_spec,
          },
        ],
      };
    },
    //每页多少条
    handleCurrentChange(val) {
      this.pageData.page = 1;
      this.pageData.pageSize = val;
      this.getData();
    },
    //选取页数
    handleSizeChange(page) {
      this.pageData.page = page;
      this.getData();
    },
    //选取
    handleSelectionChange(val) {
      this.multipleSelection = [];
      let valMain = val;
      valMain.forEach((res) => {
        this.multipleSelection.push(res.id);
      });
    },
  },
};
</script>
<style scoped>
.pagination {
  text-align: right;
  padding: 10px;
  background-size: cover;
}
</style>